<template>
  <div class="templateBox" @click.self="settingBox = false">
    <div class="left">
      <div class="modelBox" v-if="currentNav == 'modules'">
        <template v-if="currentPage.type == 'index'">
          <div v-for="(modules, modulesIndex) of modules_list" :key="modulesIndex">
            <div class="title">{{ modules.name }}</div>
            <div class="modelList">
              <div
                :class="passModules === item.type ? 'modelItem choosed' : 'modelItem'"
                @mouseenter="passModules = item.type"
                @mouseleave="passModules = ''"
                @click="addTemplate(item)"
                v-for="(item, templateIndex) of modules.sub"
                :key="templateIndex"
              >
                <a-icon style="font-size: 24px" :type="item.icon"></a-icon>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </template>
        <a-empty description="本页面不支持添加模块" v-else style="margin-top: 200px" />
      </div>
      <div class="pagesBox" v-if="currentNav == 'pages'">
        <div class="pagesList">
          <div
            :class="currentPage.id == item.id ? 'pageItem choosed' : 'pageItem'"
            v-for="(item, index) in pages"
            :key="item.id"
            @click="changePage(item.id, index)"
          >
            <a-input
              v-model="currentPage.template.name"
              v-if="showEditName && item.id == currentPage.id"
              @blur="showEditName = false"
              style="width: 100px"
              ref="input"
            ></a-input>
            <span v-else class="pageName" title="双击修改页面名称" @dblclick="editName">{{ item.template.name }}</span>
            <span class="indexPage" v-if="item.is_index == 1">首页</span>
            <div class="options">
              <!-- <div class="optionItem">
                <a-tooltip placement="top" size="small">
                  <template slot="title">
                    <span>设置主页</span>
                  </template>
                  <a-checkbox
                    :disabled="item.type != 'index' ? true : false"
                    :checked="item.is_index == 1 ? true : false"
                    @change="(e) => changeIndex(e, item)"
                  ></a-checkbox>
                </a-tooltip>
              </div> -->
              <a-icon type="setting" class="optionItem" @click.stop="changeSettingPage(item)" />
              <a-icon type="copy" v-if="item.template.copy == 1" @click.stop="copyPage(item)" class="optionItem" />
              <a-popover v-else class="disabled">
                <template slot="content">
                  <span>页面数量已达到当前版本限制，不支持复制</span>
                </template>
                <a-icon type="copy" style="opacity: 0.5" />
              </a-popover>
              <!-- <a-icon
                type="delete"
                v-if="item.template.delete == 1"
                @click.stop="delPage(item.id)"
                class="optionItem"
              />
              <a-popover v-else class="disabled">
                <template slot="content">
                  <span>系统页面不能删除</span>
                </template>
                <a-icon type="delete" style="opacity: 0.5" />
              </a-popover> -->
              <a-popover v-if="item.is_index == 1" class="disabled">
                <template slot="content">
                  <span>主页不能删除</span>
                </template>
                <a-icon type="menu" style="opacity: 0.5" />
              </a-popover>
              <a-popover v-else-if="item.type != 'diy' && item.type != 'index'" class="disabled">
                <template slot="content">
                  <span>系统页面不能删除</span>
                </template>
                <a-icon type="menu" style="opacity: 0.5" />
              </a-popover>
              <a-popover v-else placement="right">
                <template slot="content">
                  <div class="pageSetting" @click="changeIndex(item)">
                    <a-icon type="home" />
                    <span>设为首页</span>
                  </div>
                  <div class="pageSetting" @click.stop="delPage(item.id)" v-if="item.template.delete == 1">
                    <a-icon type="delete" />
                    <span>删除</span>
                  </div>
                </template>
                <a-icon type="menu" />
              </a-popover>
            </div>
          </div>
        </div>
        <div class="addpage" @click="addPage">
          <span>+ 添加页面</span>
        </div>
      </div>
      <div class="controlBox" v-if="currentNav == 'control'">
        <div class="pagesList">
          <div
            :class="currentControl == index ? 'pageItem choosed' : 'pageItem'"
            v-for="(item, index) in controls"
            :key="index"
            @click.self="changeControl(item, index)"
          >
            <div>
              <a-checkbox
                :checked="item.use == 1 ? true : false"
                :disabled="item.type == 'foot_nav' ? true : false"
                @change="(e) => changeControlShow(e, item, index)"
              ></a-checkbox>
              <span style="margin-left: 10px">{{ item.name }}</span>
            </div>
            <div class="options">
              <a-icon type="edit" @click="changeControl(item, index)" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div :class="['preview']">
      <div class="buyData" v-if="currentPage.is_index == 1 && currentPage.template.showBuyData == 1">
        <div class="buyBackground" :style="buyDataStyle"></div>
        <div class="pic"></div>
        <span :style="buyDataText">用户名 刚刚购买了韭菜 鲜嫩味浓鲜嫩味浓鲜嫩味浓</span>
      </div>
      <template v-if="currentPage.type == 'index'">
        <template v-for="(item, index) in currentPage.template.template">
          <div
            class="head"
            @click="editHeadNav(item)"
            @mouseover="hover = 'head_nav'"
            @mouseleave="hover = -1"
            :key="index"
            v-if="item.type == 'head_nav' && item.use == 1"
          >
            <div class="icon-box" v-if="hover == 'head_nav'">
              <a-tooltip placement="right">
                <template slot="title">
                  <span>编辑</span>
                </template>
                <a-icon type="edit" @click.stop="editHeadNav(item)" />
              </a-tooltip>
            </div>
            <head-nav :type="'diy'" :param="item.param" @editNav="e => changeCurrentEditNav(e,'head')" ref="moudel"></head-nav>
          </div>
        </template>
        <div class="content" v-if="currentPage.template">
          <div class="background" :style="pageStyle"></div>
          <div class="addModule" v-if="currentPage.template.template && currentPage.template.template.length <= 1">
            <img src="../../assets/images/diy/addModule.png" alt="" />
            <span>点击模块，马上设计属于您的专属商城！</span>
            <a-button type="primary" @click="currentNav = 'modules'">添加模块</a-button>
          </div>
          <div
            v-for="(templateItem, templateIndex) in currentPage.template.template"
            :class="['template-item', selectIndex == templateIndex ? 'select-template' : '']"
            @click="chooseEdit(templateIndex, templateItem)"
            :key="templateIndex"
            @mouseover="hover = templateIndex"
            @mouseleave="hover = -1"
            v-else
            :style="`margin-bottom:${currentPage.template.type != void 0 ? currentPage.template.margin + 'px' : ''};`"
          >
            <div class="icon-box" v-if="hover == templateIndex && currentPage.type == 'index'">
              <a-tooltip placement="right">
                <template slot="title">
                  <span>编辑</span>
                </template>
                <a-icon type="edit" @click.stop="chooseEdit(templateIndex, templateItem)" />
              </a-tooltip>
              <a-tooltip placement="right">
                <template slot="title">
                  <span>上移</span>
                </template>
                <a-icon
                  v-if="hover > 0 && templateItem.move == 1"
                  type="up-circle"
                  @click.stop="updateSub(-1, templateIndex)"
                />
              </a-tooltip>
              <a-tooltip placement="right">
                <template slot="title">
                  <span>下移</span>
                </template>
                <a-icon
                  v-if="hover < currentPage.template.template.length - 1 && templateItem.move == 1"
                  type="down-circle"
                  @click.stop="updateSub(1, templateIndex)"
                />
              </a-tooltip>
              <a-tooltip placement="right">
                <template slot="title">
                  <span>复制</span>
                </template>
                <a-icon
                  type="copy"
                  @click.stop="currentPage.template.template.push(templateItem)"
                  v-if="templateItem.copy == 1"
                />
              </a-tooltip>
              <a-tooltip placement="right">
                <template slot="title">
                  <span>删除</span>
                </template>
                <a-icon
                  type="delete"
                  @click.stop="delTemplate(templateIndex, templateItem)"
                  v-if="templateItem.delete == 1"
                />
              </a-tooltip>
            </div>
            <template v-if="templateItem.type == 'search'">
              <diy-search :param="templateItem.param"></diy-search>
            </template>
            <template v-if="templateItem.type == 'fast_nav'">
              <diy-fast-nav @editNav="e => changeCurrentEditNav(e,'fastNav')" :param="templateItem.param" ref="moudel"></diy-fast-nav>
            </template>
            <template v-if="templateItem.type == 'banner'">
              <diy-banner :param="templateItem.param"></diy-banner>
            </template>
            <template v-if="templateItem.type == 'nav'">
              <diy-nav @editNav="e => changeCurrentEditNav(e,'nav')" :param="templateItem.param" ref="moudel"></diy-nav>
            </template>
            <template v-if="templateItem.type == 'video'">
              <diy-video :param="templateItem.param"></diy-video>
            </template>
            <template v-if="templateItem.type == 'coupon'">
              <diy-coupon :param="templateItem.param"></diy-coupon>
            </template>
            <template v-if="templateItem.type == 'shop_info'">
              <diy-shop-info :param="templateItem.param"></diy-shop-info>
            </template>
            <template v-if="templateItem.type == 'goods'">
              <diy-goods :param="templateItem.param" @editNav="e => changeCurrentEditNav(e,'goods')" ref="moudel"></diy-goods>
            </template>
            <template v-if="templateItem.type == 'goods_show'">
              <goods-show @editNav="e => changeCurrentEditNav(e,'goodsShow')" :param="templateItem.param"></goods-show>
            </template>
            <template v-if="templateItem.type == 'miaosha'">
              <diy-miaosha @editNav="e => changeCurrentEditNav(e,'miaosha')" :param="templateItem.param"></diy-miaosha>
            </template>
            <template v-if="templateItem.type == 'pintuan'">
              <diy-pintuan @editNav="e => changeCurrentEditNav(e,'pintuan')" :param="templateItem.param"></diy-pintuan>
            </template>
            <template v-if="templateItem.type == 'nearby_mch'">
              <diy-nearby-mch :param="templateItem.param"></diy-nearby-mch>
            </template>
            <template v-if="templateItem.type == 'notice'">
              <diy-notice :param="templateItem.param"></diy-notice>
            </template>
            <template v-if="templateItem.type == 'topic'">
              <diy-topic :param="templateItem.param"></diy-topic>
            </template>
            <template v-if="templateItem.type == 'time'">
              <diy-time :param="templateItem.param"></diy-time>
            </template>
            <template v-if="templateItem.type == 'index_recommend'">
              <diy-index-recommend @editNav="e => changeCurrentEditNav(e,'indexRecommend')" :param="templateItem.param" ref="moudel"></diy-index-recommend>
            </template>
            <template v-if="templateItem.type == 'center_head'">
              <center-head :param="templateItem.param"></center-head>
            </template>
            <template v-if="templateItem.type == 'detail_goods'">
              <detail-goods :param="templateItem.param"></detail-goods>
            </template>
            <template v-if="templateItem.type == 'detail_discounts'">
              <detail-discounts :param="templateItem.param"></detail-discounts>
            </template>
            <template v-if="templateItem.type == 'detail_sku'">
              <detail-sku :param="templateItem.param"></detail-sku>
            </template>
            <template v-if="templateItem.type == 'detail_evaluate'">
              <detail-evaluate :param="templateItem.param"></detail-evaluate>
            </template>
            <template v-if="templateItem.type == 'detail_shop'">
              <detail-shop :param="templateItem.param"></detail-shop>
            </template>
            <template v-if="templateItem.type == 'detail_recommend'">
              <detail-recommend :param="templateItem.param"></detail-recommend>
            </template>
            <template v-if="templateItem.type == 'detail_introduce'">
              <detail-introduce :param="templateItem.param"></detail-introduce>
            </template>
            <template v-if="templateItem.type == 'detail_more'">
              <detail-more :param="templateItem.param"></detail-more>
            </template>

            <template v-if="templateItem.type == 'link'">
              <diy-link :param="templateItem.param"></diy-link>
            </template>
            <template v-if="templateItem.type == 'shop'">
              <diy-shop :param="templateItem.param"></diy-shop>
            </template>
            <template v-if="templateItem.type == 'super_brand'">
              <diy-super-brand :param="templateItem.param"></diy-super-brand>
            </template>
            <template v-if="templateItem.type == 'plate'">
              <diy-plate :param="templateItem.param"></diy-plate>
            </template>
            <template v-if="templateItem.type == 'recommend_goods'">
              <diy-recommend-goods :param="templateItem.param"></diy-recommend-goods>
            </template>
            <template v-if="templateItem.type == 'book'">
              <diy-book :param="templateItem.param"></diy-book>
            </template>
            <template v-if="templateItem.type == 'bargain'">
              <diy-bargain :param="templateItem.param"></diy-bargain>
            </template>
            <template v-if="templateItem.type == 'integral'">
              <diy-integral :param="templateItem.param"></diy-integral>
            </template>
            <template v-if="templateItem.type == 'mch'">
              <diy-mch :param="templateItem.param"></diy-mch>
            </template>
            <template v-if="templateItem.type == 'lottery'">
              <diy-lottery :param="templateItem.param"></diy-lottery>
            </template>
            <template v-if="templateItem.type == 'hourly_miaosha'">
              <diy-hourly-miaosha :param="templateItem.param"></diy-hourly-miaosha>
            </template>
            <template v-if="templateItem.type == 'line'">
              <diy-line :param="templateItem.param"></diy-line>
            </template>
            <template v-if="templateItem.type == 'ad'">
              <diy-ad :param="templateItem.param"></diy-ad>
            </template>
          </div>
        </div>
        <template v-for="(foot, footIndex) in controls">
          <div
            class="foot"
            @click="changeControl(foot, footIndex)"
            @mouseover="hover = 'foot_nav'"
            @mouseleave="hover = -1"
            :key="footIndex - 0 + 1000"
            v-if="foot.type == 'foot_nav' && currentPage.is_index == 1"
          >
            <div class="icon-box" v-if="hover == 'foot_nav'">
              <a-icon type="edit" @click.stop="changeControl(foot, footIndex)" />
            </div>
            <foot-nav @editNav="e => changeCurrentEditNav(e,'foot')" :param="foot.param"></foot-nav>
          </div>
        </template>
      </template>
      <template v-if="currentPage.type == 'goods'">
        <div class="content" v-if="currentPage.template">
          <div class="background" :style="pageStyle"></div>
          <div
            v-for="(templateItem, templateIndex) in currentPage.template.template"
            :class="['template-item', selectIndex == templateIndex ? 'select-template' : '']"
            @click="chooseEdit(templateIndex, templateItem)"
            :key="templateIndex"
            @mouseover="hover = templateIndex"
            @mouseleave="hover = -1"
            :style="`margin-bottom:${currentPage.template.type != void 0 ? currentPage.template.margin + 'px' : ''};`"
          >
            <template v-if="templateItem.type == 'detail_goods'">
              <detail-goods :param="templateItem.param"></detail-goods>
            </template>
            <template v-if="templateItem.type == 'detail_discounts'">
              <detail-discounts :param="templateItem.param"></detail-discounts>
            </template>
            <template v-if="templateItem.type == 'detail_sku'">
              <detail-sku :param="templateItem.param"></detail-sku>
            </template>
            <template v-if="templateItem.type == 'detail_evaluate'">
              <detail-evaluate :param="templateItem.param"></detail-evaluate>
            </template>
            <template v-if="templateItem.type == 'detail_shop' && currentPage.template.showShop == 1">
              <detail-shop :param="templateItem.param"></detail-shop>
            </template>
            <template v-if="templateItem.type == 'detail_recommend' && currentPage.template.showRecommend == 1">
              <detail-recommend :param="templateItem.param"></detail-recommend>
            </template>
            <template v-if="templateItem.type == 'detail_introduce'">
              <detail-introduce :param="templateItem.param"></detail-introduce>
            </template>
            <template v-if="templateItem.type == 'detail_more'">
              <detail-more :param="templateItem.param"></detail-more>
            </template>
          </div>
        </div>
        <template v-for="(item, index) in currentPage.template.template">
          <div class="foot" v-if="item.type == 'detail_foot'" :key="index">
            <detail-foot @editNav="changeCurrentEditNav" :param="item.param"></detail-foot>
          </div>
        </template>
      </template>
      <template v-if="currentPage.type == 'user'">
        <div class="content" v-if="currentPage.template">
          <div class="background" :style="pageStyle"></div>
          <div
            v-for="(templateItem, templateIndex) in currentPage.template.template"
            :class="['template-item', selectIndex == templateIndex ? 'select-template' : '']"
            @click="chooseEdit(templateIndex, templateItem)"
            :key="templateIndex"
            @mouseover="hover = templateIndex"
            @mouseleave="hover = -1"
            :style="`margin-bottom:${currentPage.template.type != void 0 ? currentPage.template.margin + 'px' : ''};`"
          >
            <div
              class="icon-box"
              v-if="hover == templateIndex && currentPage.type == 'user' && templateItem.type == 'center_tool'"
            >
              <a-icon type="edit" @click.stop="chooseEdit(templateIndex, templateItem)" />
              <a-icon
                v-if="hover > 3 && templateItem.move == 1"
                type="up-circle"
                @click.stop="updateSub(-1, templateIndex)"
              />
              <a-icon
                v-if="hover < currentPage.template.template.length - 1 && templateItem.move == 1"
                type="down-circle"
                @click.stop="updateSub(1, templateIndex)"
              />
              <a-icon type="copy" @click.stop="copyCenterTool(templateItem)" v-if="templateItem.copy == 1" />
              <a-icon
                type="delete"
                @click.stop="delTemplate(templateIndex, templateItem)"
                v-if="templateItem.delete == 1"
              />
            </div>
            <template v-if="templateItem.type == 'center_head'">
              <center-head @editNav="e => changeCurrentEditNav(e,'centerHead')" :param="templateItem.param" ref="moudel"></center-head>
            </template>
            <template v-if="templateItem.type == 'center_order'">
              <center-order @editNav="e => changeCurrentEditNav(e,'centerOrder')" :param="templateItem.param" ref="moudel"></center-order>
            </template>
            <template v-if="templateItem.type == 'center_wallet' && currentPage.template.showWallet == 1">
              <center-wallet @editNav="e => changeCurrentEditNav(e,'centerWallet')" :param="templateItem.param"></center-wallet>
            </template>
            <template
              v-if="
                templateItem.type == 'center_tool' && currentPage.template.showTool == 1 && templateItem.delete == 2
              "
            >
              <center-tool @editNav="e => changeCurrentEditNav(e,'centerTool')" :param="templateItem.param" ref="moudel"></center-tool>
            </template>
            <template v-if="templateItem.type == 'center_tool' && templateItem.delete == 1">
              <center-tool @editNav="e => changeCurrentEditNav(e,'centerTool')" :param="templateItem.param" ref="moudel"></center-tool>
            </template>
          </div>
        </div>
      </template>
      <template v-if="currentPage.type == 'sign'">
        <div class="content" v-if="currentPage.template">
          <div class="background" :style="pageStyle"></div>
          <div
            v-for="(templateItem, templateIndex) in currentPage.template.template"
            :class="['template-item', selectIndex == templateIndex ? 'select-template' : '']"
            @click="chooseEdit(templateIndex, templateItem)"
            :key="templateIndex"
            @mouseover="hover = templateIndex"
            @mouseleave="hover = -1"
          >
            <template v-if="templateItem.type == 'diy_sign'">
              <diy-sign :param="templateItem.param"></diy-sign>
            </template>
          </div>
        </div>
      </template>
      <template v-if="currentPage.type == 'cat'">
        <template v-for="(item, index) in currentPage.template.template">
          <div
            class="head"
            @mouseover="hover = 'head_nav'"
            @click="editHeadNav(item)"
            @mouseleave="hover = -1"
            :key="index"
            v-if="item.type == 'head_nav' && item.use == 1"
          >
            <div class="icon-box" v-if="hover == 'head_nav'">
              <a-icon type="edit" @click.stop="editHeadNav(item)" />
            </div>
            <head-nav :type="'cat'" :param="item.param" @editNav="changeCurrentEditNav"></head-nav>
          </div>
        </template>
        <div class="content cat" v-if="currentPage.template">
          <div class="background" :style="pageStyle"></div>
          <div
            v-for="(templateItem, templateIndex) in currentPage.template.template"
            :class="['template-item', selectIndex == templateIndex ? 'select-template' : '']"
            @click="chooseEdit(templateIndex, templateItem)"
            :key="templateIndex"
            @mouseover="hover = templateIndex"
            @mouseleave="hover = -1"
          >
            <template v-if="templateItem.type == 'diy_cat'">
              <diy-cat :param="templateItem.param"></diy-cat>
            </template>
          </div>
        </div>
      </template>
      <div class="window" v-if="editControl && currentNav == 'control' && currentEditControl.type == 'window'">
        <img
          :src="currentEditControl.param.list[currentWindow].picUrl"
          alt=""
          v-if="currentEditControl.param.list && currentEditControl.param.list.length > 0"
        />
      </div>
      <div class="controlList">
        <template v-for="(item, index) in controls">
          <div
            class="controlItem"
            :key="index"
            v-if="item.style == 'list' && item.use == 1"
            @click="
              changeControl(item, index)
              currentNav = 'control'
            "
          >
            <img :src="item.param.picUrl" alt="" v-if="item.param.picUrl != ''" />
            <template v-else>
              <img src="../../assets/images/diy/phone.png" alt="" v-if="item.type == 'phone'" />
              <img src="../../assets/images/diy/wechat.png" alt="" v-if="item.type == 'wechat'" />
              <img src="../../assets/images/diy/up.png" alt="" v-if="item.type == 'up'" />
            </template>
          </div>
        </template>
      </div>
    </div>
    <div :class="['right', settingBox ? 'show' : 'hidden']">
      <div class="changeTab">
        <el-tooltip effect="dark" content="保存" placement="left">
          <div class="tabItem" @click="saveCurrent">
            <a-icon type="interaction" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="模块" placement="left">
          <div :class="['tabItem', currentNav == 'modules' ? 'choosed' : '']" @click="currentNav = 'modules'">
            <a-icon type="layout" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="页面" placement="left">
          <div :class="['tabItem', currentNav == 'pages' ? 'choosed' : '']" @click="currentNav = 'pages'">
            <a-icon type="hdd" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="控件" placement="left">
          <div :class="['tabItem', currentNav == 'control' ? 'choosed' : '']" @click="currentNav = 'control'">
            <a-icon type="control" />
          </div>
        </el-tooltip>
        <!-- <el-tooltip effect="dark" content="风格" placement="left">
          <div :class="['tabItem', currentNav == '12' ? 'choosed' : '']">
            <a-icon type="skin" />
          </div>
        </el-tooltip> -->
      </div>
      <div class="settingBox">
        <template v-if="editNavItem">
          <template v-if="currentEditNav.type == 'fast_nav_left'">
            <fast-nav-left-setting v-model="currentEditNav"></fast-nav-left-setting>
          </template>
          <template v-if="currentEditNav.type == 'fast_nav_right'">
            <fast-nav-right-setting v-model="currentEditNav"></fast-nav-right-setting>
          </template>
          <template v-if="currentEditNav.type == 'fast_nav_item'">
            <fast-nav-item-setting v-model="currentEditNav"></fast-nav-item-setting>
          </template>
          <template v-if="currentEditNav.type == 'nav_item'">
            <nav-item-setting v-model="currentEditNav"></nav-item-setting>
          </template>
          <template v-if="currentEditNav.type == 'goods_title'">
            <goods-title-setting v-model="currentEditNav"></goods-title-setting>
          </template>
          <template v-if="currentEditNav.type == 'good_nav'">
            <good-nav-setting v-model="currentEditNav"></good-nav-setting>
          </template>
          <template v-if="currentEditNav.type == 'miaosha_title'">
            <miaosha-title-setting v-model="currentEditNav"></miaosha-title-setting>
          </template>
          <template v-if="currentEditNav.type == 'pintuan_title'">
            <pintuan-title-setting v-model="currentEditNav"></pintuan-title-setting>
          </template>
          <template v-if="currentEditNav.type == 'foot_nav_item'">
            <foot-nav-item-setting v-model="currentEditNav"></foot-nav-item-setting>
          </template>
          <template v-if="currentEditNav.type == 'recommend_item'">
            <recommend-item-setting v-model="currentEditNav"></recommend-item-setting>
          </template>
          <template v-if="currentEditNav.type == 'store_info'">
            <store-info-setting v-model="currentEditNav"></store-info-setting>
          </template>
          <template v-if="currentEditNav.type == 'location_info'">
            <location-info-setting v-model="currentEditNav"></location-info-setting>
          </template>
          <template v-if="currentEditNav.type == 'city_info'">
            <city-info-setting v-model="currentEditNav"></city-info-setting>
          </template>
          <template v-if="currentEditNav.type == 'detail_icon'">
            <detail-foot-setting v-model="currentEditNav"></detail-foot-setting>
          </template>
          <template v-if="currentEditNav.type == 'center_entrance'">
            <center-entrance-setting v-model="currentEditNav"></center-entrance-setting>
          </template>
          <template v-if="currentEditNav.type == 'center_entrance_item'">
            <center-entrance-item-setting v-model="currentEditNav"></center-entrance-item-setting>
          </template>
          <template v-if="currentEditNav.type == 'center_pic'">
            <center-pic-setting v-model="currentEditNav"></center-pic-setting>
          </template>
          <template v-if="currentEditNav.type == 'center_tool_item'">
            <center-tool-item-setting v-model="currentEditNav"></center-tool-item-setting>
          </template>
        </template>

        <template v-else-if="editControl">
          <template v-if="currentEditControl.type == 'foot_nav'">
            <foot-nav-setting v-model="currentEditControl.param"></foot-nav-setting>
          </template>
          <template v-if="currentEditControl.type == 'phone'">
            <phone-setting v-model="currentEditControl.param"></phone-setting>
          </template>
          <template v-if="currentEditControl.type == 'up'">
            <up-setting v-model="currentEditControl.param"></up-setting>
          </template>
          <template v-if="currentEditControl.type == 'wechat'">
            <wechat-setting v-model="currentEditControl.param"></wechat-setting>
          </template>
          <template v-if="currentEditControl.type == 'window'">
            <window-setting v-model="currentEditControl.param"></window-setting>
          </template>
        </template>

        <template v-else-if="pageSetting">
          <page-setting v-model="currentSettingPage"></page-setting>
        </template>

        <template v-else>
          <template v-if="currentSetting.type == 'head_nav'">
            <head-nav-setting :type="currentPage.template.type" v-model="currentSetting.param"></head-nav-setting>
          </template>
          <template v-if="currentSetting.type == 'search'">
            <search-setting v-model="currentSetting.param"></search-setting>
          </template>
          <template v-if="currentSetting.type == 'fast_nav'">
            <fast-nav-setting v-model="currentSetting.param"></fast-nav-setting>
          </template>
          <template v-if="currentSetting.type == 'banner'">
            <banner-setting v-model="currentSetting.param"></banner-setting>
          </template>
          <template v-if="currentSetting.type == 'nav'">
            <nav-setting v-model="currentSetting.param"></nav-setting>
          </template>
          <template v-if="currentSetting.type == 'video'">
            <video-setting v-model="currentSetting.param"></video-setting>
          </template>
          <template v-if="currentSetting.type == 'coupon'">
            <coupon-setting v-model="currentSetting.param"></coupon-setting>
          </template>
          <template v-if="currentSetting.type == 'shop_info'">
            <shop-info-setting v-model="currentSetting.param"></shop-info-setting>
          </template>
          <template v-if="currentSetting.type == 'goods'">
            <goods-setting v-model="currentSetting.param"></goods-setting>
          </template>
          <template v-if="currentSetting.type == 'miaosha'">
            <miaosha-setting v-model="currentSetting.param"></miaosha-setting>
          </template>
          <template v-if="currentSetting.type == 'pintuan'">
            <pintuan-setting v-model="currentSetting.param"></pintuan-setting>
          </template>
          <template v-if="currentSetting.type == 'nearby_mch'">
            <nearby-mch-setting v-model="currentSetting.param"></nearby-mch-setting>
          </template>
          <template v-if="currentSetting.type == 'notice'">
            <notice-setting v-model="currentSetting.param"></notice-setting>
          </template>
          <template v-if="currentSetting.type == 'topic'">
            <topic-setting v-model="currentSetting.param"></topic-setting>
          </template>
          <template v-if="currentSetting.type == 'time'">
            <time-setting v-model="currentSetting.param"></time-setting>
          </template>
          <template v-if="currentSetting.type == 'index_recommend'">
            <index-recommend-setting v-model="currentSetting.param"></index-recommend-setting>
          </template>
          <template v-if="currentSetting.type == 'goods_show'">
            <goods-show-setting v-model="currentSetting.param"></goods-show-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_goods'">
            <detail-goods-setting v-model="currentSetting.param"></detail-goods-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_discounts'">
            <detail-discounts-setting v-model="currentSetting.param"></detail-discounts-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_sku'">
            <detail-sku-setting v-model="currentSetting.param"></detail-sku-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_evaluate'">
            <detail-evaluate-setting v-model="currentSetting.param"></detail-evaluate-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_shop'">
            <detail-shop-setting v-model="currentSetting.param"></detail-shop-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_recommend'">
            <detail-recommend-setting v-model="currentSetting.param"></detail-recommend-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_introduce'">
            <detail-introduce-setting v-model="currentSetting.param"></detail-introduce-setting>
          </template>
          <template v-if="currentSetting.type == 'detail_more'">
            <detail-more-setting v-model="currentSetting.param"></detail-more-setting>
          </template>
          <template v-if="currentSetting.type == 'center_head'">
            <center-head-setting v-model="currentSetting.param"></center-head-setting>
          </template>
          <template v-if="currentSetting.type == 'center_order'">
            <center-order-setting v-model="currentSetting.param"></center-order-setting>
          </template>
          <template v-if="currentSetting.type == 'center_wallet'">
            <center-wallet-setting v-model="currentSetting.param"></center-wallet-setting>
          </template>
          <template v-if="currentSetting.type == 'center_tool'">
            <center-tool-setting v-model="currentSetting.param"></center-tool-setting>
          </template>
          <template v-if="currentSetting.type == 'diy_sign'">
            <diy-sign-setting v-model="currentSetting.param"></diy-sign-setting>
          </template>
          <template v-if="currentSetting.type == 'diy_cat'">
            <diy-cat-setting v-model="currentSetting.param"></diy-cat-setting>
          </template>

          <template v-if="currentSetting.type == 'link'">
            <link-setting v-model="setting.param"></link-setting>
          </template>
          <template v-if="currentSetting.type == 'shop'">
            <shop-setting v-model="setting.param"></shop-setting>
          </template>
          <template v-if="currentSetting.type == 'super_brand'">
            <super-brand-setting v-model="setting.param"></super-brand-setting>
          </template>
          <template v-if="currentSetting.type == 'plate'">
            <plate-setting v-model="setting.param"></plate-setting>
          </template>
          <template v-if="currentSetting.type == 'recommend_goods'">
            <recommend-goods-setting v-model="setting.param"></recommend-goods-setting>
          </template>
          <template v-if="currentSetting.type == 'book'">
            <book-setting v-model="setting.param"></book-setting>
          </template>
          <template v-if="currentSetting.type == 'bargain'">
            <bargain-setting v-model="setting.param"></bargain-setting>
          </template>
          <template v-if="currentSetting.type == 'integral'">
            <integral-setting v-model="setting.param"></integral-setting>
          </template>
          <template v-if="currentSetting.type == 'mch'">
            <mch-setting v-model="setting.param"></mch-setting>
          </template>
          <template v-if="currentSetting.type == 'lottery'">
            <lottery-setting v-model="setting.param"></lottery-setting>
          </template>
          <template v-if="currentSetting.type == 'hourly_miaosha'">
            <hourly-miaosha-setting v-model="setting.param"></hourly-miaosha-setting>
          </template>
          <template v-if="currentSetting.type == 'line'">
            <line-setting v-model="setting.param"></line-setting>
          </template>
          <template v-if="currentSetting.type == 'ad'">
            <ad-setting v-model="setting.param"></ad-setting>
          </template>
        </template>
      </div>
    </div>
    <edit-nav
      :type="'nav_item'"
      v-if="!editControl && settingBox && currentSetting.type == 'nav' && currentNav == 'modules'"
      :navList="currentSetting.param.list"
    ></edit-nav>
    <edit-nav
      :type="'fast_nav'"
      v-if="!editControl && settingBox && currentSetting.type == 'fast_nav' && currentNav == 'modules'"
      :navList="currentSetting.param.list"
    ></edit-nav>
    <edit-nav
      :type="'goods_nav'"
      v-if="!editControl && settingBox && currentSetting.type == 'goods' && currentNav == 'modules'"
      :navList="currentSetting.param.navParam.list"
    ></edit-nav>
    <edit-nav
      :type="'foot_nav'"
      v-if="
        editControl &&
        settingBox &&
        currentEditControl.type == 'foot_nav' &&
        (currentNav == 'modules' || currentNav == 'control' || currentNav == 'pages')
      "
      :navList="currentEditControl.param.list"
    ></edit-nav>
    <edit-nav
      :type="'center_tool'"
      v-if="
        !editControl &&
        settingBox &&
        currentSetting.type == 'center_tool' &&
        (currentNav == 'modules' || currentNav == 'control')
      "
      :navList="currentSetting.param.list"
    ></edit-nav>
  </div>
</template>

<script>
import { templateEdit, templateSave, delTemplate, templateList, setIndex } from '@/api/diy'
import { modules } from '@/components/Diy/modules'
import { initModule } from '@/components/Diy/init'
import {
  DiyCat,
  DiyCatSetting,
  DiySign,
  DiySignSetting,
  CenterToolItemSetting,
  CenterTool,
  CenterToolSetting,
  CenterPicSetting,
  CenterWallet,
  CenterWalletSetting,
  CenterOrder,
  CenterOrderSetting,
  CenterEntranceItemSetting,
  CenterEntranceSetting,
  DetailFoot,
  DetailFootSetting,
  DetailMore,
  DetailMoreSetting,
  DetailIntroduce,
  DetailIntroduceSetting,
  DetailRecommend,
  DetailRecommendSetting,
  DetailShop,
  DetailShopSetting,
  DetailEvaluate,
  DetailEvaluateSetting,
  DetailSku,
  DetailSkuSetting,
  DetailDiscounts,
  DetailDiscountsSetting,
  DetailGoods,
  DetailGoodsSetting,
  CenterHeadSetting,
  CenterHead,
  PageSetting,
  GoodsTitleSetting,
  WindowSetting,
  UpSetting,
  WechatSetting,
  PhoneSetting,
  RecommendItemSetting,
  GoodNavSetting,
  NavItemSetting,
  FastNavRightSetting,
  FastNavLeftSetting,
  CityInfoSetting,
  LocationInfoSetting,
  StoreInfoSetting,
  EditNav,
  DiySearch,
  SearchSetting,
  DiyNav,
  NavSetting,
  DiyBanner,
  BannerSetting,
  NoticeSetting,
  DiyNotice,
  TopicSetting,
  DiyTopic,
  LinkSetting,
  DiyLink,
  VideoSetting,
  DiyVideo,
  DiyGoods,
  GoodsSetting,
  DiyShop,
  ShopSetting,
  ShopInfoSetting,
  DiyShopInfo,
  SuperBrandSetting,
  DiySuperBrand,
  DiyNearbyMch,
  NearbyMchSetting,
  PlateSetting,
  DiyPlate,
  FastNavSetting,
  DiyFastNav,
  RecommendGoodsSetting,
  DiyRecommendGoods,
  CouponSetting,
  DiyCoupon,
  TimeSetting,
  DiyTime,
  PintuanSetting,
  DiyPintuan,
  MiaoshaSetting,
  DiyMiaosha,
  BookSetting,
  DiyBook,
  BargainSetting,
  DiyBargain,
  IntegralSetting,
  DiyIntegral,
  MchSetting,
  DiyMch,
  LotterySetting,
  DiyLottery,
  HourlyMiaoshaSetting,
  DiyHourlyMiaosha,
  LineSetting,
  DiyLine,
  AdSetting,
  DiyAd,
  ModalSetting,
  IndexRecommendSetting,
  DiyIndexRecommend,
  HeadNavSetting,
  FastNavItemSetting,
  NavigationItemSetting,
  GoodsShowSetting,
  HeadNav,
  MiaoshaTitleSetting,
  PintuanTitleSetting,
  FootNav,
  FootNavSetting,
  FootNavItemSetting,
  GoodsShow,
} from '@/components/Diy'

export default {
  name: 'DiyTemplateEdit',
  components: {
    DiyCat,
    DiyCatSetting,
    DiySign,
    DiySignSetting,
    CenterToolItemSetting,
    CenterTool,
    CenterToolSetting,
    CenterPicSetting,
    CenterWallet,
    CenterWalletSetting,
    CenterOrder,
    CenterOrderSetting,
    CenterEntranceItemSetting,
    CenterEntranceSetting,
    DetailFoot,
    DetailFootSetting,
    DetailMore,
    DetailMoreSetting,
    DetailIntroduce,
    DetailIntroduceSetting,
    DetailRecommend,
    DetailRecommendSetting,
    DetailShop,
    DetailShopSetting,
    DetailEvaluate,
    DetailEvaluateSetting,
    DetailSku,
    DetailSkuSetting,
    DetailDiscounts,
    DetailDiscountsSetting,
    DetailGoods,
    DetailGoodsSetting,
    CenterHeadSetting,
    CenterHead,
    PageSetting,
    GoodsTitleSetting,
    GoodsShow,
    WindowSetting,
    UpSetting,
    WechatSetting,
    PhoneSetting,
    RecommendItemSetting,
    PintuanTitleSetting,
    MiaoshaTitleSetting,
    GoodNavSetting,
    NavItemSetting,
    FastNavRightSetting,
    FastNavLeftSetting,
    CityInfoSetting,
    LocationInfoSetting,
    StoreInfoSetting,
    EditNav,
    HeadNavSetting,
    EditNav,
    DiySearch,
    SearchSetting,
    DiyNav,
    NavSetting,
    DiyBanner,
    BannerSetting,
    NoticeSetting,
    DiyNotice,
    TopicSetting,
    DiyTopic,
    LinkSetting,
    DiyLink,
    VideoSetting,
    DiyVideo,
    GoodsSetting,
    DiyGoods,
    ShopSetting,
    DiyShop,
    ShopInfoSetting,
    DiyShopInfo,
    SuperBrandSetting,
    DiySuperBrand,
    NearbyMchSetting,
    DiyNearbyMch,
    PlateSetting,
    DiyPlate,
    FastNavSetting,
    DiyFastNav,
    RecommendGoodsSetting,
    DiyRecommendGoods,
    CouponSetting,
    DiyCoupon,
    TimeSetting,
    DiyTime,
    PintuanSetting,
    DiyPintuan,
    MiaoshaSetting,
    DiyMiaosha,
    BookSetting,
    DiyBook,
    BargainSetting,
    DiyBargain,
    IntegralSetting,
    DiyIntegral,
    MchSetting,
    DiyMch,
    LotterySetting,
    DiyLottery,
    HourlyMiaoshaSetting,
    DiyHourlyMiaosha,
    LineSetting,
    DiyLine,
    AdSetting,
    DiyAd,
    ModalSetting,
    DiyIndexRecommend,
    IndexRecommendSetting,
    FastNavItemSetting,
    NavigationItemSetting,
    GoodsShowSetting,
    HeadNav,
    FootNav,
    FootNavSetting,
    FootNavItemSetting,
  },
  data() {
    return {
      template: [],
      modules_list: modules,
      initModule,
      // 已选设置index
      selectIndex: -1,
      setting: {},
      showModal: false, // 弹框设置
      modalSetting: {}, // 弹框设置
      // 当前所在导航 modules 模块 pages 页面  control 控件
      currentNav: 'pages',
      // 页面列表
      pages: [],
      // 控件列表
      controls: [],
      // 鼠标经过的模块索引
      passModules: '',
      // 当前选中的页面
      currentPage: {},
      // 是否显示修改页面名字的输入框
      showEditName: false,
      // 当前修改设置的组件
      currentSetting: {},
      // 当前修改导航项
      currentEditNav: {},
      // 是否在修改导航项
      editNavItem: false,
      // 当前选中控件
      currentControl: -1,
      // 当前弹窗图片的索引
      currentWindow: 0,
      // 鼠标经过的组件
      hover: '',
      // 设置框的显示与隐藏
      settingBox: false,
      // 是否在修改控件
      editControl: false,
      // 当前修改控件
      currentEditControl: {},
      // 商品分类当前所在索引
      currentIndex: 0,
      // 是否在修改页面
      pageSetting: false,
      // 正在修改的页面配置
      currentSettingPage: {},
      // 修改之前的页面列表
      beforePages: [],
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      const hide = this.$message.loading('加载中...')
      templateList().then((res) => {
        hide()
        if (res.code === 0) {
          console.log(res)
          if (!res.data.list || res.data.list.length <= 0) {
            this.dataSave('add', this.initModule.index)
          } else {
            res.data.list.forEach((item) => {
              if (item.template && item.template != '') {
                item.template = JSON.parse(item.template)
              }
              if (item.type == 'user') {
                if (!item.template || item.template == '') {
                  item.template = this.initModule.user
                }
              }
              if (item.type == 'goods') {
                if (!item.template || item.template == '') {
                  item.template = this.initModule.goods
                }
              }
              if (item.type == 'sign') {
                if (!item.template || item.template == '') {
                  item.template = this.initModule.sign
                }
              }
              if (item.type == 'cat') {
                if (!item.template || item.template == '') {
                  item.template = this.initModule.cat
                }
              }
            })
            this.pages = res.data.list
            this.currentPage = this.pages[0]
            console.log(this.currentPage)
            this.beforePages = JSON.parse(JSON.stringify(this.pages))
          }
          if (!res.data.controls) {
            this.controls = this.initModule.controls
          } else {
            try {
              res.data.controls.template = JSON.parse(res.data.controls.template)
              let controls = res.data.controls.template
              if (controls.length <= 0) {
                this.controls = this.initModule.controls
              } else {
                this.controls = res.data.controls.template
              }
            } catch (e) {
              console.log(e, 'err')
              this.controls = this.initModule.controls
            }
          }
        } else {
          this.$message.error(res.msg)
        }
        console.log(this.controls, 'controls')
      })
    },
    dataSave(type, page, id) {
      const hide = this.$message.loading('保存中...')
      templateSave({
        // template: JSON.stringify({}),
        controls:
          this.controls && this.controls != ''
            ? JSON.stringify(this.controls)
            : JSON.stringify(this.initModule.controls),
        template: type == 'add' ? JSON.stringify(page) : JSON.stringify(page.template),
        id: type == 'add' ? null : page.id,
        type: type == 'add' ? 'index' : page.type,
      }).then((res) => {
        hide()
        if (res.code === 0) {
          res.data.template.template = JSON.parse(res.data.template.template)
          if (type == 'add') {
            this.pages.push(JSON.parse(JSON.stringify(res.data.template)))
            this.beforePages.push(JSON.parse(JSON.stringify(res.data.template)))
          } else if (type == 'edit') {
            let pageId = res.data.template.id
            let index = this.pages.findIndex((item) => {
              return pageId == item.id
            })
            if (index > -1) {
              this.pages[index] = res.data.template
              console.log(this.pages)
              this.beforePages = JSON.parse(JSON.stringify(this.pages))
            }
            if (id) {
              let index = this.pages.findIndex((item) => {
                return item.id == id
              })
              this.currentPage = this.pages[index]
              this.settingBox = false
              this.selectIndex = -1
            }
          }
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    addTemplate(item) {
      if (this.currentPage.template && this.currentPage.template.addModules == 1) {
        this.currentPage.template.template.push(JSON.parse(JSON.stringify(item)))
        console.log(this.currentPage.template)
      } else {
        if (this.currentPage.template.type == void 0) {
          this.$message.warning('请先选择页面')
        } else if (this.currentPage.template.addModules != 1) {
          this.$message.warning('当前页面暂不支持添加模块')
        }
      }
    },
    delTemplate(index, item) {
      this.selectIndex = -1
      this.currentPage.template.template.splice(index, 1)
      if (item.type == 'nav' || item.type == 'fast_nav' || item.type == 'goods' || item.type == 'foot_nav') {
        this.settingBox = false
      }
    },
    updateSub(sub, index) {
      var data = this.currentPage.template.template[index]
      var data1 = this.currentPage.template.template[index + sub]
      this.currentPage.template.template[index] = data1
      this.currentPage.template.template[index + sub] = data
      this.selectIndex = index + sub
    },
    editName(e) {
      this.showEditName = true
      this.$nextTick(() => {
        this.$refs.input[0].focus()
      })
    },
    // 切换选中的页面
    changePage(id, e) {
      let that = this
      if (this.currentPage.id != void 0) {
        if (id == this.currentPage.id) {
          return
        }
        let obj = this.beforePages.find((item) => {
          return item.id == this.currentPage.id
        })
        let flag = JSON.stringify(obj.template) === JSON.stringify(this.currentPage.template) ? true : false
        if (!flag) {
          this.$confirm({
            title: '当前页面已经修改是否保存?',
            onOk() {
              that.dataSave('edit', that.currentPage, id)
            },
            onCancel() {
              that.currentPage = that.pages[e]
              that.settingBox = false
              that.selectIndex = -1
            },
            class: 'test',
          })
        } else {
          that.currentPage = that.pages[e]
          that.settingBox = false
          that.selectIndex = -1
        }
        this.initEditNav()
      }
    },
    // 切换选中的控件
    changeControl(item, index) {
      this.settingBox = true
      this.currentControl = index
      this.editControl = true
      this.currentEditControl = item
      this.editNavItem = false
      this.pageSetting = false
      this.selectIndex = 'foot_nav'
    },
    // 点击页面中的组件设置
    changeModule(e) {
      console.log(e)
      this.currentSetting = e
    },
    // 切换选中模块
    chooseEdit(templateIndex, templateItem) {
      this.selectIndex = templateIndex
      this.currentSetting = templateItem
      this.editNavItem = false
      this.currentNav = 'modules'
      this.settingBox = true
      this.editControl = false
      this.pageSetting = false
      this.initEditNav()
    },
    // 切换修改的导航
    changeCurrentEditNav(e,type) {
      this.currentEditNav = e
      this.settingBox = true
      this.editNavItem = true
      this.editControl = false
      this.initEditNav(type)
    },
    // 切换页面的设置
    changeSettingPage(e) {
      this.pageSetting = true
      this.settingBox = true
      this.currentSettingPage = e.template
      this.editNavItem = false
      this.editControl = false
    },
    changeWindow(e) {
      this.currentWindow = e
    },
    // 添加自定义页面
    addPage() {
      let page = initModule.index
      this.dataSave('add', page)
    },
    // 复制页面
    copyPage(e) {
      let page = JSON.parse(JSON.stringify(e.template))
      this.dataSave('add', page)
    },
    // 删除页面
    delPage(e) {
      console.log(e)
      let that = this
      this.$confirm({
        title: '是否确定删除页面?',
        onOk() {
          delTemplate({ id: e }).then((res) => {
            if (res.code == 0) {
              let index = that.pages.findIndex((item) => {
                return item.id == e
              })
              if (e == that.currentPage.id) {
                that.currentPage = that.pages[0]
                that.selectIndex = -1
                that.settingBox = false
              }
              that.pages.splice(index, 1)
              that.beforePages.splice(index, 1)
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    },
    changeControlShow(e, item, index) {
      console.log(e, item, index)
      let value = e.target.checked ? 1 : 2
      item.use = value
    },
    // 点击保存按钮保存当前页面
    saveCurrent() {
      this.dataSave('edit', this.currentPage)
    },
    // 点击设置主页
    changeIndex(page) {
      if (page.is_index == 0) {
        setIndex({ id: page.id, type: 'is_index' }).then((res) => {
          console.log(res)
          if (res.code == 0) {
            let index = -1
            this.pages.forEach((item, i) => {
              if (item.id != page.id) {
                item.is_index = 0
              } else {
                item.is_index = 1
                index = i
              }
            })
            this.pages.splice(index, 1)
            this.pages.unshift(page)
          }
        })
      }
    },
    // 点击复制个人中心工具模块
    copyCenterTool(e) {
      let param = JSON.parse(JSON.stringify(e))
      param.delete = 1
      this.currentPage.template.template.push(param)
    },
    // 点击修改头部导航
    editHeadNav(e) {
      this.selectIndex = -1
      this.currentSetting = e
      this.editNavItem = false
      this.settingBox = true
      this.editControl = false
      this.pageSetting = false
      this.initEditNav()
    },
    // 点击初始化组件内部选中状态
    initEditNav(type) {
      console.log(this.$refs,type)
      let moudles = this.$refs.moudel || []
      moudles.forEach((item) => {
        if(type && type != '') {
          if(type != item.param.type) {
            item.initEdit()
          }
        }else {
          item.initEdit()
        }
      })
    },
  },
  computed: {
    pageStyle() {
      return {
        backgroundColor:
          this.currentPage.template.type != void 0
            ? this.currentPage.template.backgroundType == 1
              ? this.currentPage.template.backgroundColor
              : ''
            : '',
        backgroundImage:
          this.currentPage.template.type != void 0
            ? this.currentPage.template.backgroundType == 2
              ? `url(${this.currentPage.template.backgroundUrl})`
              : ''
            : '',
        opacity:
          this.currentPage.template.type != void 0
            ? this.currentPage.template.backgroundType == 2
              ? this.currentPage.template.backgroundOpacity
              : ''
            : '',
        backgroundSize:
          this.currentPage.template.type != void 0
            ? this.currentPage.template.backgroundType == 2
              ? this.currentPage.template.backgroundRepeat == 1
                ? '100% 100%'
                : this.currentPage.template.backgroundRepeat == 2
                ? 'contain'
                : this.currentPage.template.backgroundRepeat == 3
                ? ''
                : ''
              : ''
            : '',
        backgroundRepeat:
          this.currentPage.template.type != void 0
            ? this.currentPage.template.backgroundType == 2
              ? this.currentPage.template.backgroundRepeat == 1
                ? ''
                : this.currentPage.template.backgroundRepeat == 2
                ? 'no-repeat'
                : this.currentPage.template.backgroundRepeat == 3
                ? ''
                : ''
              : ''
            : '',
      }
    },
    buyDataStyle() {
      let index = this.pages.findIndex((item) => {
        return item.is_index == 1
      })
      if (index > 0) {
        let page = this.pages[index].template
        return {
          backgroundColor:
            page.type != void 0 ? (page.buyDataBackgroundType == 1 ? page.buyDataBackgroundColor : '') : '',
          backgroundImage:
            page.type != void 0 ? (page.buyDataBackgroundType == 2 ? `url(${page.buyDataBackgroundUrl})` : '') : '',
          opacity: page.type != void 0 ? (page.buyDataBackgroundType == 2 ? page.buyDataBackgroundOpacity : '') : '',
          backgroundSize:
            page.type != void 0
              ? page.buyDataBackgroundType == 2
                ? page.buyDataBackgroundRepeat == 1
                  ? '100% 100%'
                  : page.buyDataBackgroundRepeat == 2
                  ? 'contain'
                  : page.buyDataBackgroundRepeat == 3
                  ? ''
                  : ''
                : ''
              : '',
          backgroundRepeat:
            page.type != void 0
              ? page.backgroundType == 2
                ? page.buyDataBackgroundRepeat == 1
                  ? ''
                  : page.buyDataBackgroundRepeat == 2
                  ? 'no-repeat'
                  : page.buyDataBackgroundRepeat == 3
                  ? ''
                  : ''
                : ''
              : '',
        }
      }
    },
    buyDataText() {
      let index = this.pages.findIndex((item) => {
        return item.is_index == 1
      })
      if (index > 0) {
        let page = this.pages[index].template
        return {
          color: page.buyDataColor && page.buyDataColor != '' ? page.buyDataColor : '',
        }
      }
    },
  },
}
</script>
<style scoped lang="less">
.required::before {
  content: '*';
  color: red;
}
.but-item-box {
  width: 33%;
  /* height: 80px; */
}
.but-item {
  width: 80%;
  /* height: 70px; */
  margin: auto;
  font-size: 12px;
  white-space: pre-wrap;
  margin-top: 10px;
  height: auto;
  padding: 8px;
}
.modules-box {
  display: flex;
  flex-wrap: wrap;
}
.select-template {
  position: relative;
}
.select-template::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  position: absolute;
  border: 1px dashed #000;
  z-index: 100;
}
.template-item {
  position: relative;
}
// .template-item:last-child {
//   margin-bottom: 0!important;
// }

.template-item:hover::before {
  z-index: 100;
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px dashed #000;
  z-index: 100;
}
.icon-box {
  position: absolute;
  top: 0;
  right: -22px;
  width: 22px;
  background-color: #000;
  color: #fff;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  z-index: 1000;
  .anticon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .anticon:hover {
    background-color: #2593fc;
  }
}
.firstIconBox {
  position: absolute;
  bottom: -25px;
  right: 0;
  display: flex;
  align-items: center;
  color: skyblue;
  font-size: 20px;
  font-weight: bold;
  z-index: 100;
  .anticon {
    margin-right: 10px;
  }
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  background-clip: padding-box;
  min-height: 28px;
}
.templateBox {
  min-width: 1100px;
  height: calc(100vh - 64px);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    width: 315px;
    height: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    padding-bottom: 80px;
    .modelBox {
      width: 100%;
      height: 100%;
      padding: 12px 15px;
      overflow-y: auto;
      .title {
        width: 100%;
        height: 42px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f6f7f9;
        font-size: 14px;
        margin-bottom: 20px;
      }
      .modelList {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .modelItem {
          width: 75px;
          height: 75px;
          border-radius: 4px;
          margin-right: 30px;
          background-color: #f6f7f9;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;
          cursor: pointer;
          span {
            font-size: 12px;
            margin-top: 10px;
          }
        }
        .modelItem:nth-child(3n) {
          margin-right: 0;
        }
        .choosed {
          background-color: #1890ff;
          color: #fff;
        }
      }
    }
    .controlBox,
    .pagesBox {
      width: 100%;
      height: 100%;
      padding: 12px 15px;
      overflow-y: auto;
      .pagesList {
        width: 100%;
        height: 100%;
        .pageItem {
          box-sizing: border-box;
          width: 100%;
          height: 42px;
          border-radius: 4px;
          background-color: #f6f7f9;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 15px;
          margin-bottom: 12px;
          cursor: auto;
          .options {
            display: flex;
            align-items: center;
            .anticon {
              margin-right: 10px;
              cursor: pointer;
            }
            .optionItem:hover {
              color: #1890ff;
            }
            .disbaled:hover {
              cursor: not-allowed;
            }
            .optionItem {
              margin-right: 10px;
            }
          }
          .pageName {
            padding: 5px;
            position: relative;
          }
          .pageName:hover {
            color: #1890ff;
          }
          .pageName:hover::before {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            border: 1px dashed #999;
          }
          .indexPage {
            width: 40px;
            line-height: 20px;
            text-align: center;
            height: 20px;
            background-color: #1890ff;
            border-radius: 2px;
            font-size: 12px;
            color: #fff;
          }
        }
        .choosed {
          background-color: #f2f8ff;
          border: 1px solid #1890ff;
          color: #1890ff;
        }
      }
      .addpage {
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 285px;
        height: 47px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e8eae9;
        background-color: #fafafa;
        cursor: pointer;
      }
      .addpage:hover {
        color: #fff;
        background-color: #1890ff;
      }
    }
    .modelBox::-webkit-scrollbar {
      display: none;
    }
    .pagesBox::-webkit-scrollbar {
      display: none;
    }
  }
  .preview {
    width: 375px;
    height: 667px;
    background-color: #f6f7f9;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    .head {
      height: 44px;
      position: relative;
    }
    .foot:hover::before,
    .head:hover::before {
      z-index: 100;
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      border: 1px dashed #000;
      z-index: 100;
    }
    .content {
      position: relative;
      flex: auto;
      overflow-y: auto;
      padding: 0 20px;
      margin: 0 -20px;
      .addModule {
        padding: 100px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-size: 14px;
          color: #000;
          margin: 10px 0;
        }
      }
      .background {
        position: absolute;
        height: 100%;
        width: 375px;
        transform: translateX(20px);
        left: 0;
        top: 0;
        z-index: -2;
        background-position: 50% 50%;
        background-origin: content;
      }
    }
    .foot {
      height: 50px;
      min-height: 50px;
      position: relative;
    }
    .window {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        max-width: 350px;
      }
    }
    .controlList {
      position: absolute;
      right: 15px;
      bottom: 65px;
      z-index: 1000;
      .controlItem {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-bottom: 15px;
        z-index: 10000;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .controlItem:hover::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border: 1px dashed #000;
      }
    }
    .buyData {
      position: absolute;
      top: 105px;
      left: 10px;
      z-index: 10000;
      width: 240px;
      height: 32px;
      border-radius: 16px;
      display: flex;
      align-items: center;
      padding: 5px;
      .pic {
        width: 26px;
        min-width: 26px;
        height: 26px;
        border-radius: 50%;
        background-color: #f5f5f5;
      }
      span {
        flex: auto;
        width: 0;
        margin-left: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #fff;
      }
      .buyBackground {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 99px;
        left: 0;
        top: 0;
        z-index: -2;
        background-position: 50% 50%;
        background-origin: content;
        background-color: #ffb47f;
      }
    }
  }
  .content::-webkit-scrollbar {
    display: none;
  }
  .right {
    width: 275px;
    height: 100%;
    background-color: #fff;
    padding-bottom: 20px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.5s ease;
    .settingBox {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .changeTab {
      width: 32px;
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
      background-color: #fff;
      position: absolute;
      left: -48px;
      top: 32px;
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      justify-content: flex-end;
      align-items: center;
      .tabItem {
        position: relative;
        width: 32px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
        .anticon {
          font-size: 18px;
        }
        span {
          position: absolute;
        }
      }
      .tabItem:hover {
        background-color: #e8e8e8;
      }
      .choosed {
        background-color: #1890ff;
        color: #fff;
      }
      .choosed:hover {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
  .right.show {
    transform: translateX(0);
  }
  .right.hidden {
    transform: translateX(275px);
  }
  .settingBox::-webkit-scrollbar {
    display: none;
  }
}
.pageSetting {
  display: flex;
  align-items: center;
  margin: 5px 0;
  font-size: 12px;
  cursor: pointer;
  span {
    margin-left: 10px;
  }
}
.pageSetting:hover {
  color: #1890ff;
}
</style>
